/**
 * 医生列表页面组件
 * 
 * 功能概述：
 * 1. 展示医生列表，支持分页加载和无限滚动
 * 2. 提供搜索功能，支持按医生姓名、医院、疾病症状搜索
 * 3. 支持按科室筛选医生
 * 4. 提供多种排序方式（综合、好评率、咨询数、价格）
 * 5. 支持关注/取消关注医生
 * 6. 点击医生卡片跳转到详情页
 * 7. 提供在线问诊入口
 * 
 * 技术特点：
 * - 使用 React Hooks 进行状态管理
 * - 集成 Ant Design Mobile 组件库
 * - 支持无限滚动加载
 * - 本地存储管理关注状态
 * - 完善的错误处理和用户反馈
 */

// 导入 React 核心功能：useEffect 用于副作用处理，useState 用于状态管理
import React, { useEffect, useState } from 'react'
// 导入 Ant Design Mobile 组件库：提供移动端UI组件
import { NavBar, Toast, SpinLoading, Button, SearchBar, Tabs, InfiniteScroll } from 'antd-mobile'
// 导入 React Router 的导航钩子：useNavigate 用于页面跳转，useLocation 用于获取路由状态
import { useNavigate, useLocation } from 'react-router-dom'
// 导入自定义请求工具：封装了 axios，用于与后端 API 通信
import request from '../../api/request'
// 导入医生相关API函数：用于关注和取消关注医生
import { followDoctor, cancelFollowDoctor} from '../../api/doctor'
// 导入样式文件：定义组件的样式规则
import './index.css'

/**
 * 医生数据项接口
 * 
 * 定义了医生信息的完整数据结构，包含基本信息、统计数据、关注状态等
 * 这个接口用于统一处理医生数据的类型检查和数据操作
 * 
 * 字段说明：
 * - doctorId: 医生唯一标识符，用于API调用和数据关联
 * - doctorName: 医生姓名，显示在医生卡片中
 * - imagePic: 医生头像URL，用于显示医生照片
 * - jobTitle: 医生职称，如"主任医师"、"副主任医师"等
 * - inauguralHospital: 就职医院名称，显示医生所属医院
 * - praise: 好评率百分比，如 95 表示 95%
 * - serverNum: 服务次数，显示医生已服务的患者数量
 * - servicePrice: 服务价格，显示咨询费用（单位：元）
 * - praiseNum: 好评数量，具体的好评次数
 * - badNum: 差评数量，具体的差评次数
 * - followFlag: 关注状态标识，1表示已关注，0表示未关注，可选字段
 */
interface DoctorItem {
  doctorId: number           // 医生唯一标识符，用于API调用和数据关联
  doctorName: string         // 医生姓名，显示在医生卡片中
  imagePic: string          // 医生头像URL，用于显示医生照片
  jobTitle: string          // 医生职称，如"主任医师"、"副主任医师"等
  inauguralHospital: string // 就职医院名称，显示医生所属医院
  praise: number            // 好评率百分比，如 95 表示 95%
  serverNum: number         // 服务次数，显示医生已服务的患者数量
  servicePrice: number      // 服务价格，显示咨询费用（单位：元）
  praiseNum: number         // 好评数量，具体的好评次数
  badNum: number           // 差评数量，具体的差评次数
  followFlag?: number       // 关注状态标识，1表示已关注，0表示未关注，可选字段
}

/**
 * 科室数据项接口
 * 
 * 定义了科室信息的数据结构，用于科室筛选功能
 * 包含科室的基本信息和排序权重
 * 
 * 字段说明：
 * - id: 科室唯一标识符，用于API调用和数据关联
 * - pic: 科室图标URL，用于显示科室图标
 * - departmentName: 科室名称，如"内科"、"外科"等
 * - rank: 科室排名，用于排序显示，可选字段
 */
interface DepartmentItem {
  id: number                // 科室唯一标识符，用于API调用和数据关联
  pic: string              // 科室图标URL，用于显示科室图标
  departmentName: string   // 科室名称，如"内科"、"外科"等
  rank?: number            // 科室排名，用于排序显示，可选字段
}

/**
 * 医生列表页面组件
 * 
 * 提供完整的医生列表功能，包括展示、搜索、筛选、关注等
 * 支持无限滚动加载、多条件筛选、实时搜索等高级功能
 * 
 * 主要功能模块：
 * 1. 医生列表展示和分页加载
 * 2. 搜索功能（医生、医院、症状）
 * 3. 科室筛选
 * 4. 排序功能（综合、好评、咨询数、价格）
 * 5. 关注/取消关注医生
 * 6. 跳转到医生详情页
 * 7. 在线问诊入口
 */
function DoctorList() {
  // 获取路由导航函数，用于页面跳转和返回操作
  const navigate = useNavigate()
  // 获取当前路由位置信息，用于获取传递的状态参数
  const location = useLocation()
  
  // ==================== 状态管理 ====================
  // 以下状态变量用于管理组件的各种状态和数据
  
  /**
   * 医生列表数据
   * 存储当前显示的医生信息，支持分页加载和动态更新
   * 数据类型为 DoctorItem[]，包含所有医生的详细信息
   * 
   * 数据来源：
   * - 初始加载：从API获取第一页数据
   * - 加载更多：通过无限滚动追加新数据
   * - 筛选更新：根据搜索、科室、排序条件重新获取数据
   */
  const [doctors, setDoctors] = useState<DoctorItem[]>([])
  
  /**
   * 加载状态标识
   * 标记当前是否正在加载数据，用于显示加载指示器
   * true 表示正在加载，false 表示加载完成
   * 
   * 使用场景：
   * - 初始页面加载时显示加载动画
   * - 防止用户重复触发数据请求
   * - 提供用户友好的加载反馈
   */
  const [loading, setLoading] = useState<boolean>(true)
  
  /**
   * 科室列表数据
   * 存储所有可用科室的信息，用于科室筛选功能
   * 数据类型为 DepartmentItem[]，包含科室的基本信息
   * 
   * 数据特点：
   * - 在组件初始化时一次性获取
   * - 用于热门科室展示和筛选
   * - 支持科室图标和名称显示
   */
  const [departments, setDepartments] = useState<DepartmentItem[]>([])
  
  /**
   * 当前页码
   * 用于分页加载，记录当前加载到第几页
   * 从1开始计数，用于API请求的page参数
   * 
   * 更新时机：
   * - 初始加载：设置为1
   * - 加载更多：递增1
   * - 筛选重置：重置为1
   */
  const [currentPage, setCurrentPage] = useState<number>(1)
  
  /**
   * 是否还有更多数据
   * 
   * 标记是否还有更多医生数据可以加载，用于无限滚动功能
   * true 表示还有更多数据，false 表示已加载完所有数据
   * 
   * 判断逻辑：
   * - 根据API返回的数据量判断
   * - 如果返回的数据量等于请求的数量，说明可能还有更多
   * - 用于控制无限滚动组件的显示状态
   */
  const [hasMore, setHasMore] = useState<boolean>(true)
  
  /**
   * 当前选中的科室ID
   * 
   * 用于科室筛选，记录用户当前选择的科室
   * 默认值为从路由状态获取的科室ID，如果没有则默认为1
   * 
   * 使用场景：
   * - 科室筛选功能
   * - API请求参数
   * - 热门科室高亮显示
   */
  const [selectedDeptId, setSelectedDeptId] = useState<number>(location.state?.departmentId || 1)
  
  /**
   * 搜索关键词
   * 
   * 存储用户输入的搜索关键词，用于医生搜索功能
   * 空字符串表示不进行关键词搜索
   * 
   * 搜索范围：
   * - 医生姓名
   * - 医院名称
   * - 疾病症状
   * 
   * 触发时机：
   * - 用户输入并提交搜索
   * - 实时搜索（可选实现）
   */
  const [searchKeyword, setSearchKeyword] = useState<string>('')
  
  /**
   * 医生关注状态映射
   * 
   * 使用Map来管理每个医生的关注状态，确保状态更新的即时性和准确性
   * key: doctorId, value: boolean (true表示已关注，false表示未关注)
   */
  const [followStatusMap, setFollowStatusMap] = useState<Map<number, boolean>>(new Map())
  
  /**
   * 排序条件
   * 
   * 用于医生列表的排序，不同的数值代表不同的排序方式
   * 1: 综合排序, 2: 按好评率排序, 3: 按咨询数排序, 4: 按价格排序
   * 
   * 排序逻辑：
   * - 综合排序：综合考虑多个因素
   * - 好评排序：按好评率从高到低
   * - 咨询数排序：按服务次数从高到低
   * - 价格排序：按咨询价格从低到高
   */
  const [sortCondition, setSortCondition] = useState<number>(1)

  // ==================== 事件处理函数 ====================
  // 以下函数负责处理用户的各种交互事件
  
  /**
   * 返回上一页
   * 
   * 处理用户点击返回按钮的事件，使用浏览器历史记录返回上一页
   * 
   * 实现方式：
   * - 使用 React Router 的 navigate(-1) 方法
   * - 保持浏览器的历史记录完整性
   * - 支持用户通过浏览器返回按钮操作
   */
  const handleBack = () => {
    navigate(-1)  // 使用 -1 表示返回上一页
  }

  // ==================== API 数据获取函数 ====================
  // 以下函数负责从后端获取数据，处理API请求和响应
  
  /**
   * 获取科室列表数据
   * 
   * 从后端API获取所有可用科室的信息，用于科室筛选功能
   * 这个函数在组件初始化时调用，获取科室数据供用户选择
   * 
   * API接口：/health/share/knowledgeBase/v1/findDepartment
   * 
   * 功能特点：
   * - 一次性获取所有科室数据
   * - 支持科室图标和名称显示
   * - 错误处理不影响应用运行
   * - 数据用于热门科室展示和筛选
   */
  const getDepartments = async () => {
    try {
      // 发起API请求获取科室列表数据
      const response = await request.get('/health/share/knowledgeBase/v1/findDepartment')
      // 检查响应状态
      if (response.status === 200) {
        // 成功获取数据，更新科室列表状态
        // 使用 || [] 确保即使返回空数据也不会出错
        setDepartments(response.data.result || [])
      }
    } catch (error) {
      // API请求失败，记录错误信息但不影响应用运行
      // 科室数据获取失败不会影响医生列表的显示
      console.error('获取科室列表失败:', error)
    }
  }

  /**
   * 获取医生列表数据
   * 
   * 从后端API获取医生列表，支持分页加载、科室筛选、关键词搜索、排序等功能
   * 这是医生列表页面的核心数据获取函数
   * 
   * API接口：/health/user/inquiry/v1/findDoctorList
   * 
   * 参数说明：
   * @param page 页码，默认为1，用于分页加载
   * @param isLoadMore 是否为加载更多模式，true表示追加数据，false表示替换数据
   * 
   * 请求参数：
   * - deptId: 科室ID，用于科室筛选
   * - condition: 排序条件，用于结果排序
   * - page: 页码，用于分页加载
   * - count: 每页数量，固定为10条
   * - keyword: 搜索关键词，如果为空则不传递
   * 
   * 数据处理：
   * - 合并本地关注状态
   * - 处理图片加载失败
   * - 数据格式验证和转换
   */
  const getDoctorList = async (page: number = 1, isLoadMore: boolean = false) => {
    // 如果不是加载更多模式，设置加载状态为true
    // 加载更多模式不需要显示全屏加载动画，保持用户体验
    if (!isLoadMore) {
      setLoading(true)
    }

    try {
      // 发起API请求获取医生列表数据
      const response = await request.get('/health/user/inquiry/v1/findDoctorList', {
        params: { 
          deptId: selectedDeptId,        // 科室ID，用于科室筛选
          condition: sortCondition,      // 排序条件，用于结果排序
          page,                          // 页码，用于分页加载
          count: 10,                     // 每页数量，固定为10条
          keyword: searchKeyword || undefined  // 搜索关键词，如果为空则不传递
        }
      })

      // 检查响应状态
      if (response.data.status === '0000') {
        // 确保返回的数据是数组格式，防止数据类型错误
        // 使用 Array.isArray 进行类型检查，确保数据安全
        const result = Array.isArray(response.data.result) ? response.data.result : []
        
        // 从本地存储获取用户关注的医生列表
        // localStorage 用于持久化存储用户的关注状态
        const followedDoctors = JSON.parse(localStorage.getItem('followedDoctors') || '[]')
        
        // 处理医生数据，确保每个医生对象都有正确的关注状态
        // 这个处理确保关注状态在页面刷新后仍然保持
        const doctorsWithFollowFlag = result.map((doctor: DoctorItem) => {
          // 初始化关注状态为0（未关注）
          let followFlag = 0
          
          // 如果医生对象本身有followFlag字段，使用该值
          // 优先使用API返回的关注状态
          if (doctor.followFlag !== undefined && doctor.followFlag !== null) {
            followFlag = Number(doctor.followFlag)
          } 
          // 如果本地存储中有该医生的关注记录，设置为已关注
          // 作为API数据的补充，确保关注状态的一致性
          else if (followedDoctors.includes(doctor.doctorId)) {
            followFlag = 1
          }
          
          // 调试日志：记录医生数据处理过程
          // 用于开发阶段的问题排查和数据验证
          console.log('医生数据处理:', doctor.doctorName, '原始followFlag:', doctor.followFlag, '处理后followFlag:', followFlag)
          
          // 同时更新关注状态映射
          setFollowStatusMap(prev => {
            const newMap = new Map(prev)
            newMap.set(doctor.doctorId, followFlag === 1)
            return newMap
          })
          
          // 返回处理后的医生对象
          return {
            ...doctor,
            followFlag: followFlag
          }
        })
        
        // 根据加载模式更新医生列表
        if (isLoadMore) {
          // 加载更多模式：将新数据追加到现有数据后面
          // 使用函数式更新确保数据合并的正确性
          setDoctors(prev => [...prev, ...doctorsWithFollowFlag])
        } else {
          // 普通加载模式：用新数据替换现有数据
          // 用于筛选、搜索、排序等操作后的数据更新
          setDoctors(doctorsWithFollowFlag)
        }
        
        // 根据返回的数据量判断是否还有更多数据
        // 如果返回的数据量等于请求的数量（10条），说明可能还有更多数据
        // 这是无限滚动功能的核心判断逻辑
        setHasMore(result.length === 10)
      } else {
        // API返回非200状态码，显示错误提示
        Toast.show({ content: '获取医生列表失败', position: 'center' })
      }
    } catch (error) {
      // API请求过程中发生错误，记录错误信息并显示用户友好的提示
      // 网络错误、超时等异常情况的处理
      console.error('获取医生列表失败:', error)
      Toast.show({ content: '网络错误，请重试', position: 'center' })
    } finally {
      // 无论成功还是失败，如果不是加载更多模式，都要将加载状态设置为false
      // 确保加载动画能够正确关闭
      if (!isLoadMore) {
        setLoading(false)
      }
    }
  }

  // ==================== 搜索和筛选处理函数 ====================
  // 以下函数负责处理搜索、筛选、排序等用户交互
  
  /**
   * 处理搜索功能
   * 
   * 当用户输入搜索关键词并提交时，更新搜索状态并重新获取医生列表
   * 
   * 功能特点：
   * - 支持实时搜索（可选）
   * - 重置页码到第一页
   * - 替换现有数据而不是追加
   * - 支持空关键词搜索（显示所有医生）
   * 
   * @param value 用户输入的搜索关键词
   */
  const handleSearch = (value: string) => {
    setSearchKeyword(value)      // 更新搜索关键词状态
    setCurrentPage(1)            // 重置页码为1，从第一页开始搜索
    getDoctorList(1, false)      // 重新获取医生列表，替换现有数据
  }

  /**
   * 处理科室选择
   * 
   * 当用户选择不同科室时，更新选中的科室并重新获取医生列表
   * 
   * 功能特点：
   * - 支持热门科室快速筛选
   * - 重置页码和搜索条件
   * - 更新UI高亮状态
   * - 立即刷新医生列表
   * 
   * @param deptId 用户选择的科室ID
   */
  const handleDepartmentSelect = (deptId: number) => {
    setSelectedDeptId(deptId)    // 更新选中的科室ID
    setCurrentPage(1)            // 重置页码为1
    getDoctorList(1, false)      // 重新获取医生列表
  }

  /**
   * 处理排序条件变化
   * 
   * 当用户选择不同排序方式时，更新排序条件并重新获取医生列表
   * 
   * 排序选项：
   * - 1: 综合排序（综合考虑多个因素）
   * - 2: 按好评率排序（从高到低）
   * - 3: 按咨询数排序（从高到低）
   * - 4: 按价格排序（从低到高）
   * 
   * 功能特点：
   * - 重置页码到第一页
   * - 保持当前筛选条件
   * - 立即应用新的排序规则
   * 
   * @param key 排序条件的字符串标识，需要转换为数字
   */
  const handleSortChange = (key: string) => {
    const condition = parseInt(key)  // 将字符串转换为数字
    setSortCondition(condition)     // 更新排序条件
    setCurrentPage(1)               // 重置页码为1
    getDoctorList(1, false)         // 重新获取医生列表
  }

  // ==================== 无限滚动相关函数 ====================
  // 以下函数负责处理无限滚动加载功能
  
  /**
   * 下拉加载更多数据
   * 
   * 当用户滚动到页面底部时，自动加载下一页的医生数据
   * 这是无限滚动功能的核心实现
   * 
   * 工作原理：
   * 1. 用户滚动到页面底部
   * 2. Intersection Observer 检测到加载指示器进入视口
   * 3. 触发 loadMore 函数
   * 4. 计算下一页页码
   * 5. 发起API请求获取新数据
   * 6. 将新数据追加到现有列表
   * 7. 更新 hasMore 状态
   * 
   * 性能优化：
   * - 通过 hasMore 状态防止无效请求
   * - 使用 isLoadMore 模式避免全屏加载动画
   * - 数据追加而不是替换，保持用户体验
   */
  const loadMore = async () => {
    // 如果没有更多数据，直接返回
    // 这是防止无效请求的重要检查
    if (!hasMore) return
    
    // 计算下一页的页码
    const nextPage = currentPage + 1
    setCurrentPage(nextPage)        // 更新当前页码状态
    
    // 以加载更多模式获取数据
    // isLoadMore=true 表示追加数据而不是替换
    await getDoctorList(nextPage, true)
  }

  // ==================== 导航和交互函数 ====================
  // 以下函数负责处理页面导航和用户交互
  
  /**
   * 跳转到医生详情页面
   * 
   * 当用户点击医生卡片时，跳转到该医生的详情页面
   * 
   * 路由设计：
   * - 使用 RESTful 风格的URL
   * - 通过医生ID构建详情页URL
   * - 支持浏览器前进后退操作
   * 
   * @param doctor 被点击的医生对象，包含医生的基本信息
   */
  const goToDoctorDetail = (doctor: DoctorItem) => {
    navigate(`/doctor-detail/${doctor.doctorId}`)  // 使用医生ID构建详情页URL
  }

  /**
   * 关注/取消关注医生
   * 
   * 使用布尔值控制关注状态，确保UI状态的即时性和准确性
   * 这是医生列表页面的核心交互功能之一
   * 
   * 功能流程：
   * 1. 阻止事件冒泡，避免触发医生卡片的点击事件
   * 2. 立即更新UI状态，提供即时反馈
   * 3. 调用相应的API接口
   * 4. 更新本地存储和医生列表状态
   * 5. 显示操作结果提示
   * 
   * 状态管理：
   * - UI状态：通过followStatusMap立即更新，确保即时反馈
   * - API状态：异步调用，不影响UI响应
   * - 本地存储：持久化存储关注列表，支持页面刷新
   * 
   * 错误处理：
   * - 网络错误：回滚UI状态，显示重试提示
   * - API错误：回滚UI状态，显示具体错误信息
   * 
   * @param doctor 要操作的医生对象
   * @param e 点击事件对象，用于阻止事件冒泡
   */
  const handleFollowDoctor = async (doctor: DoctorItem, e: React.MouseEvent) => {
    e.stopPropagation() // 阻止事件冒泡，避免触发医生卡片的点击事件（跳转到详情页）
    
    try {
      // 获取当前医生的关注状态
      const currentFollowStatus = followStatusMap.get(doctor.doctorId) || false
      
      // 立即更新UI状态，提供即时反馈
      setFollowStatusMap(prev => {
        const newMap = new Map(prev)
        newMap.set(doctor.doctorId, !currentFollowStatus)
        return newMap
      })
      
      if (currentFollowStatus) {
        // 当前是已关注状态，执行取消关注操作
        const response = await cancelFollowDoctor(doctor.doctorId)
        console.log('取消关注响应:', response)
        
        if (response.status === '0000') {
          // 取消关注成功，显示成功提示
          Toast.show({ content: response.message || '取消关注成功' })
          
          // 更新本地医生列表状态，将关注状态改为0
          setDoctors(prev => {
            const updated = prev.map(d => 
              d.doctorId === doctor.doctorId 
                ? { ...d, followFlag: 0 }  // 将关注状态设置为0
                : d
            )
            return updated
          })
          
          // 从本地存储中移除该医生的关注记录
          const followedDoctors = JSON.parse(localStorage.getItem('followedDoctors') || '[]')
          const updatedFollowedDoctors = followedDoctors.filter((id: number) => id !== doctor.doctorId)
          localStorage.setItem('followedDoctors', JSON.stringify(updatedFollowedDoctors))
        } else {
          // 取消关注失败，回滚UI状态并显示错误提示
          setFollowStatusMap(prev => {
            const newMap = new Map(prev)
            newMap.set(doctor.doctorId, currentFollowStatus)
            return newMap
          })
          Toast.show({ content: response.message || '取消关注失败' })
        }
      } else {
        // 当前是未关注状态，执行关注操作
        const response = await followDoctor(doctor.doctorId)
        console.log('关注响应:', response)
        
        // 检查多种可能的成功状态码，提高兼容性
        if (response.status === '8001' || response.status === '0000' || response.status === '200') {
          // 关注成功，显示成功提示
          Toast.show({ content: response.message || '关注成功' })
          
          // 更新本地医生列表状态，将关注状态改为1
          setDoctors(prev => {
            const updated = prev.map(d => {
              if (d.doctorId === doctor.doctorId) {
                return { ...d, followFlag: 1 }  // 将关注状态设置为1
              }
              return d
            })
            return updated
          })
          
          // 将医生ID保存到本地存储的关注列表中
          const followedDoctors = JSON.parse(localStorage.getItem('followedDoctors') || '[]')
          if (!followedDoctors.includes(doctor.doctorId)) {
            followedDoctors.push(doctor.doctorId)
            localStorage.setItem('followedDoctors', JSON.stringify(followedDoctors))
          }
        } else {
          // 关注失败，回滚UI状态并显示错误提示
          setFollowStatusMap(prev => {
            const newMap = new Map(prev)
            newMap.set(doctor.doctorId, currentFollowStatus)
            return newMap
          })
          Toast.show({ content: response.message || '关注失败' })
        }
      }
    } catch (error) {
      // 网络错误或其他异常，回滚UI状态并显示用户友好的提示
      const currentFollowStatus = followStatusMap.get(doctor.doctorId) || false
      setFollowStatusMap(prev => {
        const newMap = new Map(prev)
        newMap.set(doctor.doctorId, currentFollowStatus)
        return newMap
      })
      console.error('关注操作失败:', error)
      Toast.show({ content: '网络错误，请重试' })
    }
  }

  // ==================== 组件生命周期 ====================
  // 以下代码处理组件的生命周期事件
  
  /**
   * 组件初始化
   * 
   * 在组件挂载时获取科室列表和医生列表数据
   * 这是组件的初始化逻辑，只在组件首次渲染时执行
   * 
   * 执行顺序：
   * 1. 获取科室列表数据（用于筛选功能）
   * 2. 获取医生列表数据（主要内容）
   * 
   * 依赖数组为空，确保只在组件挂载时执行一次
   * 避免在每次渲染时重复获取数据
   */
  useEffect(() => {
    getDepartments()  // 获取科室列表数据
    getDoctorList()   // 获取医生列表数据
  }, [])  // 空依赖数组，确保只在组件挂载时执行一次

  // ==================== 加载状态渲染 ====================
  // 当数据正在加载时显示加载指示器
  
  /**
   * 加载状态渲染
   * 
   * 当数据正在加载时显示全屏加载指示器
   * 提供用户友好的加载反馈，避免空白页面
   * 
   * 显示条件：
   * - loading 状态为 true
   * - 通常是初始加载或筛选操作时
   * 
   * 组件特点：
   * - 使用 Ant Design Mobile 的 SpinLoading 组件
   * - 居中显示，提供良好的视觉体验
   * - 包含文字提示，明确告知用户当前状态
   */
  if (loading) {
    return (
      <div className="doctor-list-loading">
        <SpinLoading color="primary" />
        <p>加载中...</p>
      </div>
    )
  }

  // ==================== 组件渲染 ====================
  // 以下代码负责渲染组件的UI界面
  
  return (
    <div className="doctor-list-container">
      {/* 头部导航栏：提供返回按钮和页面标题 */}
      <div className="header-navbar">
        <NavBar onBack={handleBack} className="custom-navbar">
          疾病详情  {/* 页面标题，可能需要根据实际需求调整 */}
        </NavBar>
      </div>

      {/* 搜索栏：提供医生搜索功能 */}
      <div className="search-section">
        <SearchBar
          placeholder="搜索医生、医院或疾病症状"  // 搜索框占位符文本
          value={searchKeyword}                   // 绑定搜索关键词状态
          onChange={setSearchKeyword}             // 输入变化处理函数
          onSearch={handleSearch}                 // 搜索提交处理函数
          showCancelButton                        // 显示取消按钮
        />
      </div>

      {/* 热门科室：提供科室快速筛选功能 */}
      <div className="departments-section">
        <h3 className="section-title">热门科室</h3>
        <div className="departments-grid">
          {/* 只显示前8个科室，避免界面过于拥挤 */}
          {departments.slice(0, 8).map((dept) => (
            <div
              key={dept.id}
              className={`department-item ${selectedDeptId === dept.id ? 'active' : ''}`}
              onClick={() => handleDepartmentSelect(dept.id)}
            >
              {dept.departmentName}
            </div>
          ))}
        </div>
      </div>

      {/* 筛选选项：提供更多筛选条件（目前为静态展示） */}
      <div className="filter-section">
        <div className="filter-item">
          <span>请选择科室</span>
          <span className="arrow">▼</span>
        </div>
        <div className="filter-item">
          <span>全国</span>
          <span className="arrow">▼</span>
        </div>
        <div className="filter-item">
          <span>筛选</span>
          <span className="arrow">▼</span>
        </div>
      </div>

      {/* 医生列表主体区域 */}
      <div className="doctor-list-section">
        <h3 className="section-title">医生列表</h3>
        
        {/* 排序标签：提供不同的排序方式选择 */}
        <Tabs
          className="sort-tabs"
          defaultActiveKey="1"
          activeKey={sortCondition.toString()}
          onChange={handleSortChange}
        >
          <Tabs.Tab title="综合" key="1" />
          <Tabs.Tab title="好评" key="2" />
          <Tabs.Tab title="咨询数" key="3" />
          <Tabs.Tab title="价格" key="4" />
        </Tabs>

        {/* 医生列表内容区域 */}
        <div className="doctor-list-content">
          {doctors.length > 0 ? (
            <>
              {/* 医生卡片列表：展示所有医生信息 */}
              <div className="doctor-list">
                {doctors.map((doctor) => (
                  <div 
                    key={doctor.doctorId} 
                    className="doctor-card"
                    onClick={() => goToDoctorDetail(doctor)}  // 点击卡片跳转到详情页
                  >
                    {/* 医生头像区域 */}
                    <div className="doctor-avatar">
                      <img
                        src={doctor.imagePic}
                        alt={doctor.doctorName}
                        onError={(e) => {
                          // 图片加载失败时使用默认头像
                          // 确保即使图片加载失败也能正常显示
                          (e.target as HTMLImageElement).src = 'http://10.59.9.18/images/health/doctor/default.jpg'
                        }}
                      />
                    </div>
                    
                    {/* 医生信息区域 */}
                    <div className="doctor-info">
                      {/* 医生姓名和价格 */}
                      <div className="doctor-header">
                        <div className="doctor-name">{doctor.doctorName}</div>
                        <div className="doctor-price">¥{doctor.servicePrice}</div>
                      </div>
                      
                      {/* 医生职称和医院 */}
                      <div className="doctor-title-hospital">
                        {doctor.jobTitle} · {doctor.inauguralHospital}
                      </div>
                      
                      {/* 医生统计数据 */}
                      <div className="doctor-stats">
                        <span className="praise-rate">好评率 {doctor.praise}%</span>
                        <span className="service-count">服务 {doctor.serverNum}</span>
                      </div>
                      
                      {/* 医生操作按钮 */}
                      <div className="doctor-actions">
                        {/* 关注/取消关注按钮 */}
                        <Button 
                          size="small" 
                          color={followStatusMap.get(doctor.doctorId) ? 'default' : 'default'}
                          onClick={(e) => handleFollowDoctor(doctor, e)}
                          style={{ 
                            marginRight: '8px',
                            backgroundColor: followStatusMap.get(doctor.doctorId) ? '#f5f5f5' : undefined,
                            color: followStatusMap.get(doctor.doctorId) ? '#999' : undefined,
                            borderColor: followStatusMap.get(doctor.doctorId) ? '#d9d9d9' : undefined
                          }}
                        >
                          {followStatusMap.get(doctor.doctorId) ? '已关注' : '关注'}
                        </Button>
                        
                        {/* 在线问诊按钮 */}
                        <Button 
                          size="small" 
                          color="primary"
                          onClick={(e) => {
                            e.stopPropagation()  // 阻止事件冒泡
                            Toast.show({ content: '在线问诊功能开发中' })
                          }}
                        >
                          去问诊
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              
              {/* 无限滚动加载组件：处理分页加载 */}
              <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                {hasMore ? (
                  // 还有更多数据时显示加载指示器
                  <div className="loading-more">
                    <SpinLoading color="primary" />
                    <span>加载中...</span>
                  </div>
                ) : (
                  // 没有更多数据时显示结束提示
                  <div className="no-more">
                    <span>没有更多了</span>
                  </div>
                )}
              </InfiniteScroll>
            </>
          ) : (
            // 没有医生数据时显示空状态
            <div className="doctor-empty">
              <p>暂无医生数据</p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

// 导出医生列表组件，供其他模块使用
export default DoctorList
